﻿<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>Aries.DevFramework V4.3</title>
    <link href="/Style/CSS/main.css" rel="stylesheet" />
    <link href="/Style/JS/EasyUI-1.3.4/themes/icon.css?r=1" rel="stylesheet" type="text/css" />
    <script src="/Style/JS/jquery-1.7.1.min.js"></script>
    <script src="/Style/JS/json2.js"></script>
    <script src="/Style/JS/EasyUI-1.3.4/jquery.easyui.min.js"></script>
    <script src="/Style/JS/AriesJS/Aries.Global.js"></script>
    <script src="/Style/JS/AriesJS/Aries.Utility.js"></script>
    <script type="text/javascript">
        var themeName = AR.Utility.Cookie.get('sys_theme') || 'default';
        document.write('<link id="lk_theme" href="/Style/JS/EasyUI-1.3.4/themes/' + themeName + '/easyui.css?r=1" rel="stylesheet" type="text/css" />');
    </script>
    <style>
        #set_theme {
            height: 26px;
            /*background: #4797e9;*/
            display: inline-block;
            line-height: 26px;
            text-align: center;
            border-radius: 4px;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
        }

        .div_menu {
            line-height: 30px;
            text-align: center;
        }

            .div_menu ul {
                display: none;
                position: relative;
                border-radius: 4px;
            }

            .div_menu li {
                width: 120px;
                height: 30px;
                background: #4797e9;
                float: left;
                margin-left: -18px;
                cursor: pointer;
                position: relative;
                border-top: none;
                border-bottom: none;
            }

                .div_menu li:nth-child(1) {
                    border-radius: 4px 4px 0 0;
                }

                .div_menu li:nth-child(4) {
                    border-radius: 0 0 4px 4px;
                }

                .div_menu li a {
                    color: #fff;
                }


        .wrap a {
            text-decoration: none;
        }

        .wrap {
            width: auto;
            margin: 10px auto;
            text-align: center;
        }

            .wrap label {
                text-align: right;
                display: inline-block;
                width: 80px;
            }

            .wrap input {
                margin: 15px auto;
                display: inline-block;
                width: 200px;
                height: 30px;
                padding-left: 5px;
                color: #333;
                border: solid #bbb 1px;
                line-height: 30px;
            }

        .btn {
            display: inline-block;
            width: 80px;
            height: 30px;
            line-height: 30px;
            color: #fff;
            text-align: center;
            border-radius: 5px;
            font-size: 16px;
        }

        .red {
            background-color: #bc489b;
            margin: 10px 20px 0 100px;
        }

        .blue {
            background-color: #15a4fa;
        }
    </style>

    <!--[if IE]>
        <style type="text/css">
            #div_menus {padding-top:40px;}
        </style>
    <![endif]-->
</head>
<body>


    <div class="easyui-layout" style="width: 100%;" data-options="fit:true" id="layout_container">
        <div data-options="region:'north'" title="" style="height: 125px; overflow-y: no-display;">
            <div class="panel-top">
                <div class="panel-logo"><a href="#"></a></div>
                <div class="panel-login">
                    <span class="area" id="set_theme">皮肤设置</span>
                    <a id="btn_modify" class="ico1">修改密码</a>
                    <a id="lbUserName" class="ico3"></a>
                    <a href="/logout.html" id="btn_exit" class="ico2">退出</a>
                </div>
                <div class="panel-nav">
                    <ul id="ul_guid">
                    </ul>
                </div>
                <div class="panel-sub-nav" id="div_menus">
                </div>
            </div>
        </div>


        <div data-options="region:'west',title:'功能菜单',split:true" style="width: 188px;">
            <ul id="ul_power" class="sidebar-nav">
            </ul>
        </div>

        <div data-options="region:'center',iconCls:'icon-ok'" style="width: 100%">
            <div id="tabs" class="easyui-tabs" data-options="fit:true,border:false,cache:false">
            </div>
        </div>
        <div id="mm" class="easyui-menu" style="width: 150px;display:none">
            <div id="mm-tabclose">关闭</div>
            <div id="mm-tabcloseall">全部关闭</div>
            <div id="mm-tabcloseother">除此之外全部关闭</div>
            <div class="menu-sep"></div>
            <div id="mm-tabcloseright">当前页右侧全部关闭</div>
            <div id="mm-tabcloseleft">当前页左侧全部关闭</div>
        </div>

    </div>
    <script>
        AR.Global.GetUser(function (data) {
            $("#lbUserName").html('【' + data.fullname + '】');
        });
    </script>
    <script type="text/javascript">

        //var menuJsonData;
        //模板、用于渲染各个层级的菜单
        var mTemplate = {
            1: "<li><a  linkURL='{2}'  selfID='{0}'>{1}</a></li>",
            2: "<a  linkURL='{2}' selfID='{0}' >{1}</a><em>|</em>"
        };
        var mIsShortcut = false, //用于标记判断是否是快捷菜单点击后的触发
            onHideLevel2 = true;//是否开启隐藏二级空菜单
        $(function () {
            var menuJsonData = AR.Utility.Ajax.get("GetUserMenu");

            var rootID = undefined;
            var jsondata = formatTreeJson(menuJsonData, 'menuid', 'menuname', 'parentmenuid', rootID);

            var div_menus = $("#div_menus");
            var ul_power = $("#ul_power");
            var ul = $("#ul_guid");

            initMenu(jsondata, ul, 1);
            //一级菜单栏点击事件
            $("#ul_guid>li").bind("click", function () {
                $(this).siblings().removeClass("hover");
                $(this).addClass("hover");

                div_menus.html("");
                var selfID = $(this).children("a").attr("selfid");

                var jsondata = formatTreeJson(menuJsonData, 'menuid', 'menuname', 'parentmenuid', selfID);
                if (jsondata.length == 0) {
                    //没有子级
                    var url = $(this).children("a").attr("linkurl");
                    if (url != '#') {
                        var text = $(this).children("a").html();
                        showTab(url, text);
                    }
                    return false;
                }
                if (JSON.stringify(jsondata).indexOf('"menulevel":3') == -1) {
                    if (onHideLevel2) {
                        div_menus.hide();
                        $('#layout_container').layout('panel', 'north').panel("resize", { height: 82 });
                        $('#layout_container').layout("resize");
                    }
                    ul_power.html("").removeClass("easyui-tree").addClass("sidebar-nav"); //获取到菜单容器,并清空HTML
                    initMenu(jsondata, ul_power, 1);
                }
                else {
                    if (onHideLevel2) {
                        div_menus.show();
                        $('#layout_container').layout('panel', 'north').panel("resize", { height: 125 });
                        $('#layout_container').layout("resize");
                    }
                    initMenu(jsondata, div_menus, 2);
                }

            })

            //二级菜单点击事件
            $(document).on("click", "#div_menus > a", function () {
                $(this).siblings().removeClass("hover");
                $(this).addClass("hover");
                ul_power.html("");
                var selfID = $(this).attr("selfID");
                var jsondata = formatTreeJson(menuJsonData, 'menuid', 'menuname', 'parentmenuid', selfID);
                if (JSON.stringify(jsondata).indexOf('"menulevel":4') == -1) {  //||jsondata[0].children[0]==undefined 临时处理           
                    ul_power.removeClass("easyui-tree").addClass("sidebar-nav");
                    initMenu(jsondata, ul_power, 1);
                }
                else {
                    ul_power.tree({
                        data: jsondata,
                        loadFilter: function (data) { return data },
                        onClick: function (node) {
                            showTab(node.attributes.menuurl, node.text);
                        },
                        onLoadSuccess: function () {
                            //重置图片URL地址
                            $(".tree-node").each(function () {
                                var tnode = $("#ul_tree").tree("getNode", this);
                                if (tnode.attributes && typeof (tnode.attributes.iconURL) != 'undefined') {
                                    var style = "background:url('" + tnode.attributes.iconURL + "') no-repeat center center;";
                                    $(this).find(".tree-icon").first().attr("style", style);
                                }
                            })
                        }
                    }).removeClass("sidebar-nav").addClass("easyui-tree");
                    if (!mIsShortcut) {
                        //触发第一项默认选中   
                        var id = getFirstNode(jsondata[0]);
                        var node = $('#ul_power').tree('find', id);
                        $('#ul_power').tree('select', node.target);
                        $('[node-id="' + node.id + '"]').click();

                    }
                }
            });
            $('#set_theme').html('主题【' + (AR.Utility.Cookie.get("sys_theme") || 'default') + '】');
            $("#set_theme").mouseover(function () {
                var that = $(this);
                var position = $(this).offset();
                var div = $('#theme_menu');
                if (div.length > 0) {
                    div.show();
                } else {
                    var div = $("<div id='theme_menu'>");
                    var ul = $('<ul>');
                    var item = AR.Global.themes;
                    for (var i = 0; i < item.length; i++) {
                        var li = $('<li>');
                        li.append($('<a>').html(item[i]));
                        ul.append(li);
                    }
                    ul.children('li').click(function () {
                        var themeName = $(this).children('a').html();
                        setThemeName(themeName);
                        AR.Utility.Cookie.set('sys_theme', themeName, 1);
                        that.html('主题【' + (AR.Utility.Cookie.get("sys_theme") || 'default') + '】');
                    }).end().addClass('div_menu');
                    div.css({ height: 'auto', width: '120', position: 'absolute', top: position.top + that.height(), left: position.left, zIndex: 1000 });
                    div.append(ul);
                    div.mouseout(function () {
                        div.hide();
                    });
                    div.mouseover(function () {
                        div.show();
                    });
                    $('body').append(div);
                }
            }).mouseout(function () {
                $('#theme_menu').hide();
            });

            function setThemeName(themeName) {
                var ui = AR.Utility.Cookie.get('sys_ui') || '';
                $('#lk_theme').attr('href', ui + '/Style/JS/EasyUI-1.3.4/themes/' + themeName + '/easyui.css');
                $.each($("#tabs").tabs('tabs'), function () {
                    var iframe = this.find('iframe')[0];
                    if (iframe) {
                        var document = iframe.contentWindow;
                        if (document.$) {
                            document.$('#lk_theme').attr('href', ui + '/Style/JS/EasyUI-1.3.4/themes/' + themeName + '/easyui.css');
                        }

                    }
                });
            }
            $('#btn_modify').click(function () {
                var $div = $('<div>').addClass('wrap');
                var $lbl1 = $('<label>').html(' 新密码：');
                var $lbl2 = $('<label>').html('确认密码：');
                var $pwd1 = $('<input type="password">').attr('id', 'pwd1');
                var $pwd2 = $('<input type="password">').attr('id', 'pwd2');
                var $btnSave = $('<a>').attr('id', 'btn_save').addClass('btn red').html('保存');
                var $btnClose = $('<a>').attr('id', 'btn_save').addClass('btn blue').html('关闭');

                $div.append($('<p>').append($lbl1).append($pwd1)).append($('<p>').append($lbl2).append($pwd2)).append($btnSave).append($btnClose);
                AR.Utility.Window.dialog('修改密码', $div, { width: 480, height: 250 });

                $btnSave.click(function () {
                    var pwd1 = $pwd1.val();
                    var pwd2 = $pwd2.val();
                    if (pwd1 != pwd2) { AR.Utility.Window.showMsg('输入密码不一致！', '系统提示'); return; };
                    var reg = new RegExp("^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])[^'\"%/\\\\]{8,20}$");
                    if (!reg.exec(pwd2)) {
                        AR.Utility.Window.showMsg("密码过于简单，必须由[数字、字母、符号]组成的8~20位字符", '系统提示');
                        return;
                    }
                    AR.Utility.Ajax.post('ChangePassword', null, { pwd: pwd2 }, function (result) {
                        if (result.success) {
                            AR.Utility.Window.closeDialog();
                        }
                        AR.Utility.Window.showMsg(result.msg, '系统提示');
                    });
                });
                $btnClose.click(function () {
                    AR.Utility.Window.closeDialog();
                });
            });
        });

        function getThemeName() {
            return AR.Utility.Cookie.get("sys_theme");
        }

        //初始化当前根节点下所有子菜单
        function initMenu(jsonSource, Dom, tempIndex) {
            var innnerhtml = "";
            for (var i = 0; i < jsonSource.length; i++) {
                if (jsonSource[i].attributes.isshow == 1) {
                    var menuID = jsonSource[i].id;
                    var menuName = jsonSource[i].text;
                    var menuUrl = jsonSource[i].attributes.menuurl;
                    var template = mTemplate[tempIndex];
                    innnerhtml = innnerhtml + AR.Utility.stringFormat(template, menuID, menuName, menuUrl);
                }
            }
            Dom.html(innnerhtml);
            //先注册完事件，再触发
            setTimeout(function () {
                Dom.children().eq(0).addClass("hover").click();
            }, 100);

        }

        //使用递归遍历得到最后一层节点
        function getFirstNode(jsonItem) {
            if (jsonItem.children.length > 0) {
                return getFirstNode(jsonItem.children[0]);
            } else {
                return jsonItem.id;
            }
        }

        //功能栏单击事件处理
        $(document).on("click", "#ul_power > li", function () {
            $("#ul_power> li").removeClass("hover");
            $(this).addClass("hover");
            var text = $(this).children("a").html();
            var url = $(this).children("a").attr("linkurl");
            if (url != '#') {
                showTab(url, text);
            }
        });

        //是否直接打开一个tab
        function showTab(url, text, isAddBackUrl) {
            if (typeof (url) == 'string') {
                if (url.length > 4) {
                    var tab = addTab(url, text, isAddBackUrl);
                    tabCloseFunc(tab);
                    return false;
                }
            }
            return true;
        }

        //传入tab添加关闭功能
        function tabCloseFunc(tab) {
            var span = tab.panel('options').tab.find('.tabs-inner');
            span.unbind("dblclick").dblclick(function () {
                var subtitle = $(this).children("span").text();
                $('#tabs').tabs('close', subtitle);
            });

            span.unbind('contextmenu').bind('contextmenu', function (e) {
                var mm = $('#mm');
                mm.menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
                var subtitle = $(this).children("span").text();
                mm.data("currtab", subtitle);
                return false;
            });
        }
        //添加选项卡方法，根据iframe模式
        function addTab(url, title, isAddHistory) {
            var h = 42;
            var TabContainer = $("#tabs");
            var iframe = $("<iframe frameborder='0' />");
            iframe.attr({ "src": url, "id": "f_center" }).css({ width: "100%", height: TabContainer.height() - h });
            //判断选项卡不存在则新增一个选项卡
            var tab = null;
            if (!TabContainer.tabs("exists", title)) {
                tab = TabContainer.tabs('add', {
                    title: title,
                    content: iframe,
                    closable: true,
                    tools: [{
                        iconCls: 'icon-mini-refresh',
                        handler: function () {
                            var tab = $("#tabs").tabs("getTab", title);
                            tab.panel('refresh');//ie8下没反应
                            //this.iframe[0].src = url;
                        }
                    }]
                });
            } else {
                tab = TabContainer.tabs("getTab", title);
                var oldSrc = tab.panel().panel('body').find('#f_center').attr('src');
                if (isAddHistory == true) {
                    if (typeof (tab.historyUrl) == 'undefined')
                        tab.historyUrl = new Array();
                    tab.historyUrl.push(oldSrc);
                }
                tab.panel("options").content = iframe;
                TabContainer.tabs("select", title);
                //TabContainer.tabs('update', { tab: tab, options: { content: iframe } });
                // tab.panel('refresh');
            }
            if (TabContainer.tabs("tabs").length > 5) {
                TabContainer.tabs("close", 0);
            }
            return TabContainer.tabs('getTab', title);
        }
        //
        function formatTreeJson(nodesdatas, idField, textField, parentField, rootID) {
            return function (parentid) {
                var cn = new Array();
                for (var i = 0; i < nodesdatas.length; i++) {
                    var n = {}, attrs = {};
                    if (nodesdatas[i].isshow == 0) { continue; };
                    each: for (var j in nodesdatas[i]) {
                        if (j == idField || j == textField) {
                            continue each;
                        }
                        attrs[j] = nodesdatas[i][j];
                    }
                    if (!n.attributes) {
                        n.attributes = attrs;
                    }
                    n.id = nodesdatas[i][idField], n.text = nodesdatas[i][textField], n.state = 'open';
                    var pid = nodesdatas[i][parentField] == '' ? undefined : nodesdatas[i][parentField];
                    if (pid == parentid) {
                        var id = nodesdatas[i][idField];
                        n.children = arguments.callee(id);
                        cn.push(n);

                    }
                }
                return cn;
            }(rootID);

        }

        //anotherWay Tree


    </script>

    <script type="text/javascript">
        $(function () {
            tabCloseEven();
        });
        //传入tab添加关闭功能
        function tabCloseFunc(tab) {
            var span = tab.panel('options').tab.find('.tabs-inner');
            span.unbind("dblclick").dblclick(function () {
                var subtitle = $(this).children("span").text();
                $('#tabs').tabs('close', subtitle);
            });

            span.unbind('contextmenu').bind('contextmenu', function (e) {
                var mm = $('#mm');
                mm.menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
                var subtitle = $(this).children("span").text();
                mm.data("currtab", subtitle);
                return false;
            });
        }
        //绑定右键菜单事件
        function tabCloseEven() {
            //关闭当前
            $('#mm-tabclose').click(function () {
                var currtab_title = $('#mm').data("currtab");
                $('#tabs').tabs('close', currtab_title);
            })
            //全部关闭
            $('#mm-tabcloseall').click(function () {
                $('.tabs-inner span').each(function (i, n) {
                    var t = $(n).text();
                    $('#tabs').tabs('close', t);
                });
            });
            //关闭除当前之外的TAB
            $('#mm-tabcloseother').click(function () {
                var currtab_title = $('#mm').data("currtab");
                $('.tabs-inner span').each(function (i, n) {
                    var t = $(n).text();
                    if (t != currtab_title)
                        $('#tabs').tabs('close', t);
                });
            });
            //关闭当前右侧的TAB
            $('#mm-tabcloseright').click(function () {
                var nextall = $('.tabs-selected').nextAll();
                if (nextall.length == 0) {
                    //msgShow('系统提示','后边没有啦~~','error');
                    alert('选中项右边不存在Tab');
                    return false;
                }
                nextall.each(function (i, n) {
                    var t = $('a:eq(0) span', $(n)).text();
                    $('#tabs').tabs('close', t);
                });
                return false;
            });
            //关闭当前左侧的TAB
            $('#mm-tabcloseleft').click(function () {
                var prevall = $('.tabs-selected').prevAll();
                if (prevall.length == 0) {
                    alert('选中项左边不存在Tab');
                    return false;
                }
                prevall.each(function (i, n) {
                    var t = $('a:eq(0) span', $(n)).text();
                    $('#tabs').tabs('close', t);
                });
                return false;
            });
        }

    </script>

</body>
</html>
